<template>
  <div>
    <van-nav-bar
      title="发布房源"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
      class="nav-bar-text-color nav-bar-icon-color nav-bar-background-color nav-bar-title-text-color"
    />
    <div class="header">房源信息</div>
    <!-- <van-divider /> -->
    <!-- 小区名称 -->
    <van-field
      v-model="value1"
      readonly
      input-align="right"
      label="小区名称"
      right-icon="arrow"
      placeholder="请输入小区名称"
    />
    <!-- 租金租金 -->
    <van-field
      v-model="tel"
      type="tel"
      label="租金"
      placeholder="请输入租金/月"
    >
      <template #button>
        <span>￥/月</span>
      </template>
      <!-- 建筑面积 -->
    </van-field>
    <van-field
      v-model="tels"
      type="tels"
      label="建筑面积"
      placeholder="请输入建筑面积"
    >
      <template #button>
        <span>㎡</span>
      </template>
    </van-field>
    <!-- //户 型 -->
    <van-field
      readonly
      clickable
      right-icon="arrow"
      name="picker"
      :value="value2"
      label="户 型"
      input-align="right"
      placeholder="请选择"
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
    <!-- 所在楼层 -->
    <van-field
      readonly
      clickable
      right-icon="arrow"
      name="picker"
      :value="value3"
      label="所在楼层"
      input-align="right"
      placeholder="请选择"
      @click="Cict = true"
    />
    <van-popup v-model="Cict" position="bottom">
      <van-picker
        show-toolbar
        :columns="cict"
        @confirm="CICT"
        @cancel="Cict = false"
      />
    </van-popup>
    <!-- 朝 向 -->
    <van-field
      readonly
      clickable
      right-icon="arrow"
      name="picker"
      :value="value4"
      label="朝 向"
      input-align="right"
      placeholder="请选择"
      @click="Dir = true"
    />
    <van-popup v-model="Dir" position="bottom">
      <van-picker
        show-toolbar
        :columns="dir"
        @confirm="DIR"
        @cancel="Dir = false"
      />
    </van-popup>
    <!-- 房屋标题 -->
    <van-field readonly label="房屋标题" />
    <van-field
      v-model="message"
      rows="2"
      autosize
      type="textarea"
      placeholder="请输入标题（例如：整租 小区名 2室 5000元)"
    />
    <!-- 房屋图像 -->
    <van-field readonly label="房屋图像" />
    <van-uploader
      :after-read="afterRead"
      multiple
      v-model="fileList"
      class="picture"
    />
    <van-field readonly label="房屋图像" />
    <van-grid :icon-size="23" :border="false" :column-num="5">
      <van-grid-item icon="send-gift-o" text="衣柜" />
      <van-grid-item icon="shop-o" text="洗衣机" />
      <van-grid-item icon="newspaper-o" text="空调" />
      <van-grid-item icon="fire-o" text="天然气" />
      <van-grid-item icon="cashier-o" text="冰箱" />
    </van-grid>
    <van-grid :icon-size="23" :border="false" :column-num="5">
      <van-grid-item icon="bulb-o" text="暖气" />
      <van-grid-item icon="tv-o" text="电视" />
      <van-grid-item icon="filter-o" text="热水器" />
      <van-grid-item icon="hotel-o" text="宽带" />
      <van-grid-item icon="comment-circle-o" text="沙发" />
    </van-grid>
    <van-divider />
    <!-- 房屋标题 -->
    <van-field readonly label="房屋标题" />
    <van-field
      class="mes"
      v-model="message"
      rows="2"
      autosize
      type="textarea"
      placeholder="请输入标题（例如：整租 小区名 2室 5000元)"
    />
    <van-tabbar
      ><van-button type="default" block class="cl" @click="showDialog"
        >取消</van-button
      >
      <van-dialog
        v-model="show"
        title="提示"
        show-cancel-button
        confirm-button-text="继续编辑"
        message="放弃发布房源？"
        cancel-button-text="放弃"
      >
      </van-dialog>
      <van-button type="primary" block color="#21b97a"
        >提交</van-button
      ></van-tabbar
    >
  </div>
</template>

<script>

import { publishhouse } from '@/api/home'
// import { Dialog } from 'vant'
export default {
  data () {
    return {
      tel: '',
      tels: '',
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      message: '',
      mes: '',
      fileList: [],
      columns: ['一室', '二室', '三室', '四室', '四室+'],
      cict: [],
      dir: ['东', '西', '南', '北', '东南', '东北', '西南', '西北'],
      showPicker: false,
      Dir: false,
      Cict: false,
      show: false

    }
  },
  async created () {
    const { body } = await publishhouse()
    this.cict = body.floor.map(item => item.label)
  },
  methods: {
    onConfirm (value) {
      this.value2 = value
      this.showPicker = false
    },
    CICT (value) {
      this.value3 = value
      this.Cict = false
    },
    DIR (value) {
      this.value4 = value
      this.Dir = false
    },
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
      console.log(this.fileList)
    },
    showDialog () {
      this.show = true
    }
  }
}
</script>

<style lang="less" scoped>
.cl {
  color: #21b97a;
}
.header {
  color: #21b97a;
  background-color: #fff;
  font-size: 15px;
  padding: 15px 15px 9px;
  width: 100%;
  box-sizing: border-box;
}
.list-line {
  position: relative;
  display: flex;
  flex: 1 1;
  align-self: stretch;
  padding-right: 15px;
  overflow: hidden;
  align-items: center;
  .sss {
    line-height: 1.5;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-top: 7px;
    padding-bottom: 7px;
  }
}
.picture {
  margin-left: 10px;
  margin-top: 10px;
}
.mes {
  min-height: 150px;
  padding-left: 15px;
  padding-right: 15px;
}
</style>
